<template>
  <div class="banner">
    <!-- swiper -->
    <Swiper
      :option="swiperOption"
      v-if="bannerList.length"
    >
      <swiper-slide
        v-for="(item, i) in bannerList"
        :key="i + 'swiper'"
      >
        <template>
          <a href="javascript:;">
            <img
              :src="item.imgUrl"
              :alt="item.imgName"
            />
          </a>
        </template>
      </swiper-slide>
    </Swiper>
    <!--分页器-->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'my-banner',
  data() {
    return {
      swiperOption: {
        notNextTick: false,
        pagination: {
          el: '.swiper-pagination',
        },
        loop: true,
        touchRatio: 2, // 触渭动的顺畅度initialslide: 1，// 默认展示页
        autoplay: true, // 是否自动播放
        speed: 500, // 播放速度
        slidesPerview: 'auto',
        centeredslides: true,
        paginationclickable: true,
        spaceBetween: 5, // 块之间的同隔
        on: {
          slideChangeTransitionEnd: function () {
            this.autoplay.start()
          },
        },
      },
    }
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  mounted() {},
  props: {
    bannerList: {
      type: Array,
      default() {
        return []
      },
    },
  },
}
</script>

<style lang="less" scoped>
.banner {
  position: relative;
  .swiper {
    width: 100vw;
    overflow: hidden;
    height: 49.0667vw;
    .swiper-wrapper {
      img {
        height: 100%;
      }
    }
    .swiper-pagination-bullets {
      .swiper-pagination-bullet {
        border-radius: 1.6vw;
        opacity: 1;
        width: 1.6vw;
        height: 1.6vw;
        background-color: #fff;
      }
      .swiper-pagination-bullet-active {
        width: 2.9333vw;
        height: 1.3333vw;
        background-color: #8ed6ee;
      }
    }
  }
}
</style>
